<template>
  <div :class="{mydisabled:disabled,mydisabled_not:!disabled}">
    <component v-if='components_name && field' :is='components_name' :field="field" :ref="field.name" :ctl="ctl" @setVo='toSetEditVo'
               :param="param||{}" :editType="editType"></component>
    <div v-else>
      {{field.title}}
    </div>
    <div class="mydimmer"></div>
  </div>
</template>

<script>
  import tool from 'src/util/tool';
  import util from '_util/index';
  import logic from '_logic';

  import mytext from 'components/field/text';
  import myhidden from 'components/field/hidden';
  import myenum from 'components/field/enum';
  import enum_many from 'components/field/enum_many';
  import enum_chb from 'components/field/enum_chb';
  import mybind from 'components/field/bind';
  import mytextArea from 'components/field/textArea';
  import mydate from 'components/field/date';
  import mypic from 'components/field/pic';
  import mypics from 'components/field/pic';
  import mynum from 'components/field/num';
  import field_zip from 'components/field/field_zip';
  import city from 'components/field/city';
  import rich from 'components/field/rich';
  import custom from 'components/field/custom';
  import show_text from 'components/field/show_text';
  import show_line from 'components/field/show_line';
  import show_rich from 'components/field/show_rich';
  import date_range from 'components/field/date_range';


  export default {
    data() {
      return {
        val: '',
        disabled:false
      }
    },
    components: {
      city,
      mytext,
      myhidden,
      custom,
      show_line,
      show_text,
      show_rich,
      rich,
      mytextArea,
      mydate,
      myenum,
      date_range,
      enum_many,
      enum_chb,
      mypic,
      mypics,
      mynum,
      field_zip,
      mybind
    },
    props: ['field', 'ctl', 'param','editType'],
    methods: {
      up_disable([target_field,targetVal]) {
        if(target_field==this.field.name) {
          this.disabled=targetVal==1;
        }
      },
      toSetEditVo(name, val) {
        this.$emit('setVo', name, val)
      },
      doActive(params){
        for(let ref in this.$refs){
          if(this.$refs[ref].doActive){
            this.$refs[ref].doActive(params);
          }
        };
      }
    },
    created() {
      logic.edit.setVal(this)

      let op = util.getOp(this);
      let showType =this.field.showType
      switch (op) {
        case 'insert':
          if(showType==3) {
            this.disabled=true;
          }
          break;
        case 'update':
          if(showType==2) {
            this.disabled=true;
          }
          break;
      }

//      util.eventOn(this, 'up_fval', this.up_fval);
      util.eventOn(this, 'up_disable', this.up_disable);
    },
    computed: {
      components_name() {
        if (!this.field)
          return null;
        let str = ''
        switch (this.field.type) {
          case 12:
            str = 'city';//城市
            break;
          case 14:
            str = 'show_line';//单行展示
            break;
          case 15:
            str = 'show_text';//文本展示
            break;
          case 16:
            str = 'show_rich';//富文本展示
            break;
          case 17:
            str = 'date_range';//日期范围
            break;
          case 18:
            str = 'enum_many';//枚举(多选)
            break;
          case 19:
            str = 'enum_chb';//枚举(checkbox)
            break;
          case 20:
            str = 'myhidden';//隐藏字段
            break;
          case 13:
            str = 'custom';//自定义
            break;
          case 11:
            str = 'field_zip';//字段组
            break;
          case 1:
            str = 'mytext';//字符串
            break;
          case 9:
            str = 'rich';//富文本
            break;
          case 6:
            str = 'mybind';//绑定
            break;
          case 2:
            str = 'mytextArea';//文本
            break;
          case 5:
            str = 'mydate';//日期
            break;
          case 7:
            str = 'mypics';//图片
            break;
          case 10:
            str = 'mypics';//图片
            break;
          case 4:
            str = 'mynum';//数字
            break;
          case 3:
            str = 'myenum';//枚举(单选)
            break;
          default:
            str = null
        }
        return str;
      }
    },
    destroyed() {
    },
    updated() {
    }
  }
</script>
<style rel="stylesheet/less" lang="less" scoped>
  .mydisabled {
    position: relative;
    .mydimmer{
      position: absolute;
      left: -5px;
      right:0;
      top: -5px;
      bottom: -5px;
      background-color: rgba(0,0,0,0.3);
      z-index:999;
      border-radius:5px;
    }
      .mydisabled{
          .mydimmer{
              display: none;
          }
      }
  }
  .mydisabled_not{
      .mydisabled{
          .mydimmer{
              display: block;
          }
      }
      .mydimmer{
          display: none;
      }
  }
</style>